<template>
  <!--  选择支付方式  -->
  <u-popup
      :show="showpayTypePopup"
      :closeOnClickOverlay="true"
      mode="bottom"
      round="10"
      @close="handleClosePayTypePopup"
  >
    <u-gap height="15"></u-gap>
    <view class="pay-popup">
      <view class="flex col-center row-between p-l-30 p-r-30 border-bottom">
        <view class="font-28 pingfang-heavy" @click="handleClosePayTypePopup">
          取消
        </view>
        <view class="text-center">确认支付</view>
        <view class="font-28 pingfang-heavy" style="opacity: 0">
          取消
        </view>
      </view>
      <u-gap height="10"></u-gap>
      <view
          class="pay-cell"
          v-if="item.value === '2' || orderItem.type !== 'recharge'"
          :class="{'border-bottom': index != payTypeList.length - 1}"
          v-for="(item, index) in payTypeList"
          :key="index"
          @click="handleConfirmPayType(item.value)"
      >
        <view class="pay-cell_lavel">{{item.label}}</view>
        <view class="pay-cell_value">
          <u-icon name="arrow-right" size="16" color="#333"></u-icon>
        </view>
      </view>
      <u-gap height="40"></u-gap>
    </view>
  </u-popup>
</template>
<script>
export default {
  name: "e-pay-type-popup",
  data(){
    return{
      showpayTypePopup: false,
      payTypeList: [
        {
          label: "易币支付",
          value: "1"
        },
        {
          label: "微信支付",
          value: "2"
        }
      ], // 支付方式
      payType: "2", // 支付方式
      orderItem:{},
    }
  },
  methods: {
    handleShowPayTypePopup(item){
      this.orderItem = item;
      this.showpayTypePopup = true;
    },
    // 关闭弹窗
    handleClosePayTypePopup(){
      this.showpayTypePopup = false;
      this.orderItem = {};
    },
    // 选择支付方式
    handleConfirmPayType(value){
      this.payType = value;
      this.handleClosePayTypePopup();
      this.$emit("choose", this.payType);
    },
  },
}
</script>
<style scoped lang="scss">
.pay-popup{
  .close-icon{
  }
  .border-bottom{
    border-bottom: 1rpx solid #f1f1f1;
    padding-bottom: 30rpx;
  }
  .pay-cell{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30rpx;
    color: #181818;
    .pay-cell_lavel{
      font-size: 28rpx;
    }
    .pay-cell_value{
      font-size: 28rpx;
      display: flex;
      align-items: center;
      .not-check{
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        border:1rpx solid #999999;
      }
      .check-icon{
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        image{
          height: 100%;
          width: 100%;
          display: block;
        }
      }
    }
  }
}
</style>